<template>
    <div>
        <a-modal
            :title="this.fromSate.id?'编辑审评地点/车间':'新增审评地点/车间'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :forceRender="true"
            class="addCheckDirectories-modal-v"
        >
            <a-spin tip="正在加载中..." :spinning="spinning">
                <table border bordercolor="#d9d9d9" style="width: 100%;">
                    <tr>
                        <td class="title-left-v">
                            审评地点/车间
                        </td>
                        <td colspan="5">
                            <vxe-pulldown ref="pulldownRef" destroy-on-close style="width: 100%;">
                                <template #default>
                                    <a-textarea 
                                        v-model="fromSate.fddcj"
                                        :autosize="{ minRows: 1, maxRows: 3 }"
                                        placeholder="请选择或输入审评地点/车间"
                                        @focus="focusEvent" @keyup="keyupEvent"
                                    ></a-textarea>
                                    <!-- <vxe-input v-model="searchName" placeholder="可搜索的大数据下拉框" @focus="focusEvent" @keyup="keyupEvent"></vxe-input> -->
                                </template>
                                <template #dropdown>
                                    <vxe-list height="200" class="my-dropdown2" :data="optionList" auto-resize style="border: 1px solid #38f;">
                                    <template #default="{ items }">
                                        <div class="list-item2" v-for="(item,index) in items" :key="index" @click="selectEvent(item)" style="padding: 5px;border: 1px solid #d9d9d9;">
                                            <span>{{ item }}</span>
                                        </div>
                                    </template>
                                    </vxe-list>
                                </template>
                            </vxe-pulldown>
                            
                        </td>
                    </tr>
                </table>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {
    jcbjupdateJcml,
    jcbjaddJcml,
    jcbjgetLsFddcj,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            fromSate:{},
            visible:false,
            spinning:false,
            optionList:[],
            mockData:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            this.fromSate = row
            this.spinning = true
            jcbjgetLsFddcj({sqsxid:this.fromSate.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.optionList = JSON.parse(JSON.stringify(res.result))
                    this.mockData = JSON.parse(JSON.stringify(res.result))
                }else{
                    this.optionList = []
                    this.mockData = []
                }
                this.spinning = false
            })
        },
        focusEvent(){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                $pulldown.showPanel()
            }
        },
        keyupEvent(){
            this.optionList = this.fromSate.fddcj ? this.mockData.filter((item) => item.indexOf(this.fromSate.fddcj) > -1) : this.mockData
        },
        selectEvent(item){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                this.fromSate.fddcj = item
                $pulldown.hidePanel().then(() => {
                this.optionList = this.mockData
                })
            }
        },
        handleOk(){
            if(!this.fromSate.fddcj){
                this.$message.warning('请输入审评地点/车间')
                return
            }
            if(this.fromSate.id){
                jcbjupdateJcml(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.visible = false
                        this.$emit('addCheckDirectoriessuccess',this.fromSate)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                jcbjaddJcml(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.visible = false
                        this.$emit('addCheckDirectoriessuccess',this.fromSate)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
        }
    }
}
</script>
<style lang="less">
.addCheckDirectories-modal-v{
    td{
        padding: 5px;
    }
    .title-left-v{
        text-align: right;
        width: 125px;
        padding-right: 5px;
        font-weight: 600;
        font-size: 16px;
        background-color:#e6f7ff;
        font-family: simHei;
        color: rgba(0, 0, 0, 0.85);
    }
}

</style>